<template>
    <div>
        <div>
            <el-button @click="test(true)">显示 添加按钮</el-button>
            <el-button @click="test(false)">隐藏</el-button>
        </div>

        <el-button type="primary" v-an="product-add">测试添加权限按钮</el-button>

        <el-tag v-an="!product-add">（无添加权限）</el-tag>


        <my-list
            ref="list"
            :model-value="{data:[
                    {id:1,name:'ok',remark:'ok1'},
                    {id:2,name:'ok2',remark:'ok2'},
                    {id:3,name:'ok3',remark:'ok3'},
                ]}"
            :page-size="11"
            :store="true"
        >


            <el-table-column label="名称" align="center">
                <template v-slot="scope">
                    <div class="link" @click="edit_click(scope.row)">{{ scope.row.name }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="价格" prop="remark" v-if="has_an('product-price')"></el-table-column>

            <el-table-column label="操作" align="center" width="240">
                <template v-slot="scope">
                    <el-button size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
            <template #query="scope">
                <kv label="名称">
                    <el-input v-model="scope.query.name"></el-input>
                </kv>
            </template>
        </my-list>

    </div>
</template>

<script setup>





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"url":"","query":{"db":{"port":3306},"style":"JPA","pkgName":""},"tables":[]});


const $props = defineProps({

});





const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const test = function(f) {
    jv.main.an_version++;
    if (f) {
        jv.ans["/demo/an"].push("product-add")
    } else {
        jv.ans["/demo/an"].removeItem("product-add")
    }
};

onMounted( function() {
} )



</script>

<style scoped lang="scss">
:deep(td) {
    overflow: hidden;
}
</style>
